<!--
 * @Description: 
 * @Author: zhanyinjia
 * @Date: 2022-09-29 14:23:08
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2023-08-02 17:02:43
-->
<template>
  <div class="scrollBox">
    <el-button type="primary" @click="type = 'docx'">docx预览</el-button>
    <el-button type="primary" @click="type = 'xlsx'">xlsx预览</el-button>
    <el-button type="primary" @click="type = 'pdf'">pdf预览</el-button>

    <div class="content">
      <vue-office-docx
        v-if="type === 'docx'"
        :src="docxSrc"
        style="height: 800px"
        @rendered="renderedHandler"
        @error="errorHandler"
      />
      <vue-office-excel
        v-else-if="type === 'xlsx'"
        :src="xlsxSrc"
        style="height: 800px"
        @rendered="renderedHandler"
        @error="errorHandler"
      />
      <pdf v-else-if="type === 'pdf'" v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"></pdf>
    </div>
  </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import pdf from 'vue-pdf'
export default {
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    pdf
  },
  data() {
    return {
      type: '',
      docxSrc: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx',
      xlsxSrc: 'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx',
      pdfSrc: 'http://img.pandamuying.com/oss/backend/pandatown/6AE25F6C-DA70-41EE-98D9-A8616CB03E4F.pdf',
      numPages: null // pdf 总页数
    }
  },
  mounted() {
    this.getNumPages()
  },
  methods: {
    viewFile(type) {
      switch (type) {
        case 'docx':
          break
        case 'xlsx':
          break
        case 'pdf':
          break
      }
    },
    renderedHandler() {
      console.log('渲染完成')
    },
    errorHandler() {
      console.log('渲染失败')
    },
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.pdfSrc)
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages
        })
        .catch((err) => {
          console.error('pdf 加载失败', err)
        })
    }
  }
}
</script>

<style lang="" scoped>
</style>